<!--
 * @Author: JiraiyaChen 979526234@qq.com
 * @Date: 2025-03-27 10:52:07
 * @LastEditors: JiraiyaChen 979526234@qq.com
 * @LastEditTime: 2025-05-26 09:23:10
 * @Description: 评分点纯展示
-->

<template>
  <div>
    <h6>评分点</h6>
    <el-collapse ref="collapseRef" v-model="activeNames" class="collapse-one">
      <el-collapse-item
        v-for="(itemOne, indexOne) in collapseItemList"
        :id="itemOne.orderNo"
        :key="itemOne.orderNo"
        :title="getCollapseTitle(indexOne)"
        :name="itemOne.orderNo"
      >
        <CollapseForm
          ref="collapseFormRef"
          :disabled="true"
          :show-add-btn="false"
          :show-delete-btn="false"
          :form-data="itemOne.formData"
          :mark-mode-code="props.info.markModeCode"
        />
        <div v-if="itemOne.children?.length > 0">
          <el-collapse v-model="activeNames2" class="collapse-two">
            <el-collapse-item
              v-for="(itemTwo, indexTwo) in itemOne.children"
              :id="itemTwo.orderNo"
              :key="itemTwo.orderNo"
              :title="getCollapseTitle2(indexOne, indexTwo)"
              :name="itemTwo.orderNo"
            >
              <CollapseForm
                ref="collapseFormRef2"
                :disabled="true"
                :show-add-btn="false"
                :show-delete-btn="false"
                :form-data="itemTwo.formData"
                :mark-mode-code="props.info.markModeCode"
              />
              <div v-if="itemTwo.children?.length > 0">
                <el-collapse v-model="activeNames3" class="collapse-three">
                  <el-collapse-item
                    v-for="(itemThree, indexThree) in itemTwo.children"
                    :id="itemThree.orderNo"
                    :key="itemThree.orderNo"
                    :title="getCollapseTitle3(indexOne, indexTwo, indexThree)"
                    :name="itemThree.orderNo"
                  >
                    <CollapseForm
                      ref="collapseFormRef3"
                      :disabled="true"
                      :show-add-btn="false"
                      :show-delete-btn="false"
                      :form-data="itemThree.formData"
                      :mark-mode-code="props.info.markModeCode"
                    />
                  </el-collapse-item>
                </el-collapse>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup lang="ts">
const activeNames = ref<any[]>([])
const activeNames2 = ref<any[]>([])
const activeNames3 = ref<any[]>([])
const props = defineProps<{
  collapseItemList: any[]
  info: any
}>()

// 获取折叠标题
const getCollapseTitle = (indexOne: number) => {
  return String(indexOne + 1)
}
const getCollapseTitle2 = (indexOne: number, indexTwo: number) => {
  return `${String(indexOne + 1)}.${String(indexTwo + 1)}`
}
const getCollapseTitle3 = (indexOne: number, indexTwo: number, indexThree: number) => {
  return `${String(indexOne + 1)}.${String(indexTwo + 1)}.${String(indexThree + 1)}`
}
</script>

<style scoped lang="scss">
.collapse-one {
  border-left: 2px solid #a0cfff !important;
  padding: 10px;
}
.collapse-two {
  border-left: 2px solid #b3e19d !important;
  padding: 10px;
}
.collapse-three {
  border-left: 2px solid #f3d19e !important;
  padding: 10px;
}
:deep(.el-collapse-item__header) {
  padding-left: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
</style>
